<template>
    <div id="aCoursesList" class="bg-fa of">
        <!-- /课程列表 开始 -->
        <section class="container">
            <header class="comm-title">
                <h2 class="fl tac">
                    <span class="c-333">全部课程</span>
                </h2>
            </header>
            <section class="c-sort-box">
                <section class="c-s-dl">
                    <dl>
                        <dt>
                            <span class="c-999 fsize14">课程类别</span>
                        </dt>
                        <dd class="c-s-dl-li">
                            <ul class="clearfix">
                                <li>
                                    <a title="全部" href="#">全部</a>
                                </li>

                                <li v-for="subject in subjectNestedList" :key="subject.id"
                                    :class="{ current: oneSubject == subject.id }">
                                    <a :title="subject.title" href="javascript:;"
                                        @click="searchOne(subject.id)">{{ subject.title }}</a>
                                </li>
                            </ul>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <span class="c-999 fsize14"></span>
                        </dt>
                        <dd class="c-s-dl-li">
                            <ul class="clearfix">
                                <li v-for="subject in subSubjectList" :key="subject.id"
                                    :class="{ current: twoSubject == subject.id }">
                                    <a :title="subject.title" href="javascript:;"
                                        @click="searchTwo(subject.id)">{{ subject.title }}</a>
                                </li>
                            </ul>
                        </dd>
                    </dl>
                    <div class="clear"></div>
                </section>
                <div class="js-wrap">
                    <section class="fr">
                        <span class="c-ccc">
                            <i class="c-master f-fM">{{data.pageIndex}}</i>/
                            <i class="c-666 f-fM">{{data.totalPages}}</i>
                        </span>
                    </section>
                    <section class="fl">
                        <ol class="js-tap clearfix">
                            <li :class="{'current bg-orange':buyCountSort!=''}" @click="sortByBuyCount">
                                <a title="销量" href="#">销量&nbsp;
                                    <span v-show="buyCountSort!=''">↓</span>
                                </a>
                            </li>
                            <li :class="{'current bg-orange':gmtCreateSort!=''}" @click="sortByGmtCreate">
                                <a title="最新" href="#">最新&nbsp;
                                    <span v-show="gmtCreateSort!=''">↓</span>
                                </a>
                            </li>
                            <li :class="{'current bg-orange':priceSort!=''}" @click="sortByPrice">
                                <a title="价格" href="#">价格&nbsp;
                                    <span v-show="priceSort!=''">↓</span>
                                </a>
                            </li>
                        </ol>
                    </section>
                </div>
                <div class="mt40">
                    <!-- /无数据提示 开始-->
                    <section class="no-data-wrap" v-if="data.totalCount === 0">
                        <em class="icon30 no-data-ico">&nbsp;</em>
                        <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span>
                    </section>
                    <!-- /无数据提示 结束-->
                    <article v-else class="comm-course-list">
                        <ul class="of" id="bna">
                            <li v-for="course in data.items" :key="course.id">
                                <div class="cc-l-wrap">
                                    <section class="course-img">
                                        <img :src="course.cover" class="img-responsive" :alt="course.title" />
                                        <div class="cc-mask">
                                            <a :href="`/course/${course.id}`" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
                                        </div>
                                    </section>
                                    <h3 class="hLh30 txtOf mt10">
                                        <a :href="`/course/${course.id}`" :title="course.title" class="course-title fsize18 c-333">{{
                                                course.title
                                        }}</a>
                                    </h3>
                                    <section class="mt10 hLh20 of">
                                        <span class="fr jgTag bg-green">
                                            <i v-if="course.price === 0" class="c-fff fsize12 f-fA">免费</i>
                                            <i v-else class="c-fff fsize12 f-fA">￥{{ course.price }}</i>
                                        </span>
                                        <span class="fl jgAttr c-ccc f-fA">
                                            <i class="c-999 f-fA">{{ course.buyCount }}人学习</i>
                                            |
                                            <i class="c-999 f-fA">{{ course.viewCount }}人浏览</i>
                                        </span>
                                    </section>
                                </div>
                            </li>
                        </ul>
                        <div class="clear"></div>
                    </article>
                </div>
                <!-- 公共分页 开始 -->
                <div>
                    <div class="paging">
                        <!-- undisable这个class是否存在，取决于数据属性hasPrevious -->
                        <a href="javascript:;" :class="{ undisable: !data.hasPrevPages }" @click="gotoPage(1)"
                            title="首页">首页</a>
                        <a href="javascript:;" :class="{ undisable: !data.hasPrevPages }"
                            @click.prevent="gotoPage(data.pageIndex - 1)" title="前一页">&lt;</a>
                        <a href="javascript:;" :title="`第${page}页`" v-for="page in data.totalPages" :key="page" :class="{
                            current: data.pageIndex === page,
                            undisable: data.pageIndex === page,
                        }" @click="gotoPage(page)">{{ page }}</a>

                        <a href="javascript:;" :class="{ undisable: !data.hasNextPages }"
                            @click.prevent="gotoPage(data.pageIndex + 1)" title="后一页">&gt;</a>
                        <a href="javascript:;" :class="{ undisable: !data.hasNextPages }"
                            @click="gotoPage(data.totalPages)" title="末页">末</a>
                        <div class="clear"></div>
                    </div>
                </div>
                <!-- 公共分页 结束 -->
            </section>
        </section>
        <!-- /课程列表 结束 -->
    </div>
</template>
<script>
import courseApi from "/api/course";
import subjectApi from "../../api/subject";
import cookie from "js-cookie";
export default {
    data() {
        return {
            page: 1,//当前页
            limit: 8,//每页显示的条数
            searchObj: {//查询参数对象
                subjectId: '',//一级分类id
                subjectParentId: '',//二级分类id
                buyCountSort:'',//按照销量排序
                gmtCreateSort:'',//按照添加时间排序
                priceSort:'',//按照价格排序
                title:'',//获取cookie中存放的搜索关键字
            }, //条件查询参数
            data: {}, //课程数据
            subjectNestedList: [],//课程以及分类（包括二级）
            subSubjectList: [],//课程二级分类
            oneSubject: '',//课程一级选中项
            twoSubject: '',//课程二级选中项
            buyCountSort:'',//记录是否按照销量来排序
            gmtCreateSort:'',//记录是否按照时间来排序
            priceSort:'',//记录是否按照价格来排序
        };
    },
    mounted(){
        // 判断是否点击了搜索按钮
        if(cookie.get('search')){
            this.searchObj.title=cookie.get('keyword')
            cookie.remove('search')
        }
        this.initCourseList();
        this.initSubject()
    },
    // created() {
    //     // const key = cookie.get('keyword')
    //     // this.searchObj.title=key
    //     // console.log(Cookie.get('keword'));
    //     this.initCourseList();
    //     this.initSubject()
    // },
    methods: {
        // 初始化课程列表数据
        initCourseList() {
            console.log(this.searchObj);
            courseApi.getPagedList(this.page, this.limit, this.searchObj).then((res) => {
                // console.log(res);
                this.data = res.data;
            });
        },
        // 课程分类
        gotoPage(page = 1) {
            if (page <= 0) {
                return;
            }
            if (page > this.data.totalPages) {
                return;
            }
            //调用分页API接口获取课程数据
            courseApi.getPagedList(page, this.limit, this.searchObj).then((res) => {
                console.log(res);
                this.data = res.data;
            });
        },
        //   初始化课程分类
        initSubject() {
            subjectApi.getAllSubject().then(res => {
                this.subjectNestedList = res.data
            })
        },
        // 切换一级课程分类
        searchOne(parentId) {
            // 根据一级分类id查找对应的二级分类
            let subject = this.subjectNestedList.find(s => s.id == parentId)
            this.subSubjectList = subject.children
            // 标记当前选中的一级分类
            this.oneSubject = parentId
            //   重置当前选中的二级分类
            this.twoSubject = ''
            //   重置当前选中的二级分类
            this.searchObj.subjectId = ''
            // 为查询参数对象赋值
            this.searchObj.subjectParentId = parentId
            // 重新获取数据
            this.initCourseList()
        },
        // 切换二级课程分类
        searchTwo(subjectId) {
            // 标记当前选中的二级分类
            this.twoSubject = subjectId
            // 为查询参数对象赋值
            this.searchObj.subjectId = subjectId
            // 重新获取数据
            this.initCourseList()
        },
        sortCourse(){
            // 构造排序条件
            this.searchObj.buyCountSort=this.buyCountSort
            this.searchObj.gmtCreateSort=this.gmtCreateSort
            this.searchObj.priceSort=this.priceSort
            // 调用api获取排序数据
            this.initCourseList()
        },
        // 按照销量来排序
        sortByBuyCount(){
            this.buyCountSort="1"
            this.gmtCreateSort=''
            this.priceSort=''
            
            this.sortCourse()
        },
        // 按照添加时间排序
        sortByGmtCreate(){
            this.gmtCreateSort='1'
            this.buyCountSort=""
            this.priceSort=''

            this.sortCourse()
        },
        // 按照价格排序
        sortByPrice(){
            this.priceSort='1'
            this.buyCountSort=""
            this.gmtCreateSort=''

            this.sortCourse()
        }
    },
};
</script>